<template>
  <div id="upf-topology" style="width: 100%; height: 90%"></div>
  <div class="overall-decision">
    <div><span>决策结果:</span>{{ decision }}</div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "UpfTopology",
  components: {},
  props: {
    data: {
      type: Object,
      default: () => [],
    },
  },
  watch: {
    data(newData) {
      if (newData) {
        // console.log(newData);
        this.setRoute(newData.strategy_path);
        this.decision = "目标检测客户端 => UPF-" + newData.strategy_path[0] + " => UPF-" + newData.strategy_path[1] + " => 服务端" + (newData.strategy_path[1] - 1);
      }
    },
  },
  data() {
    return {
      myChart: null,
      // ws: null,  // WebSocket 连接对象
      // message: '',
      route: [],
      decision: '',
      topologyOptions: [
        {
          graphic: [
            {
              type: "rect",
              shape: {
                x: 200, // 左上角 x 坐标
                y: 280, // 左上角 y 坐标
                width: 520, // 宽度
                height: 360, // 高度
              },
              style: {
                stroke: "#FFFFFF", // 边框颜色
                lineWidth: 5, // 边框宽度
                fill: "none", // 无填充
                lineDash: [4, 6], // 虚线样式
              },
            },
            {
              type: "rect",
              shape: {
                x: 390, // 左上角 x 坐标
                y: 90, // 左上角 y 坐标
                width: 350, // 宽度
                height: 130, // 高度
              },
              style: {
                stroke: "#FFFFFF", // 边框颜色
                lineWidth: 5, // 边框宽度
                fill: "none", // 无填充
                lineDash: [4, 6], // 虚线样式
              },
            },
          ],
          series: [
            {
              type: "graph",
              layout: "none",
              data: [
                {
                  name: "目标检测客户端",
                  x: 0,
                  y: 0,
                  symbol: "image://" + require("@/assets/icon/ue.png"),
                  symbolSize: [70, 70],
                },
                {
                  name: "文件传输客户端",
                  x: 0,
                  y: 60,
                  symbol: "image://" + require("@/assets/icon/ue.png"),
                  symbolSize: [70, 70],
                },
                {
                  name: "   NWDAF",
                  x: 160,
                  y: -50,
                  symbol: "image://" + require("@/assets/icon/nwdaf1.png"),
                  symbolSize: [90, 80],
                  label: {
                    position: "right",
                  },
                  itemStyle: { color: "green" },
                },
                {
                  name: "SMF",
                  x: 40,
                  y: -50,
                  symbol: "image://" + require("@/assets/icon/server.png"),
                  symbolSize: [70, 80],
                  label: {
                    position: "left",
                  },
                  itemStyle: { color: "green" },
                },
                {
                  name: "负载\n感知\n模块",
                  x: 130,
                  y: -50,
                  symbol: "image://" + require("@/assets/icon/rect2.png"),
                  symbolSize: [90, 100],
                  label: {
                    position: "inside",
                  },
                },
                {
                  name: "策略\n生成\n模块",
                  x: 100,
                  y: -50,
                  symbol: "image://" + require("@/assets/icon/rect2.png"),
                  symbolSize: [90, 100],
                  label: {
                    position: "inside",
                  },
                },
                {
                  name: "NWDAF连接点",
                  x: 160,
                  y: -15,
                  symbol: "none",
                  label: { show: false },
                },
                {
                  name: "NWDAF2",
                  x: 160,
                  y: -32,
                  symbol: "none",
                  label: { show: false },
                },
                {
                  name: "SMF连接点",
                  x: 40,
                  y: -15,
                  symbol: "none",
                  label: { show: false },
                },
                {
                  name: "UPF-0",
                  x: 60,
                  y: 0,
                  symbol: "image://" + require("@/assets/icon/nwdaf2.png"),
                  symbolSize: [90, 80],
                  itemStyle: { color: "green" },
                },
                {
                  name: "UPF-1",
                  x: 60,
                  y: 60,
                  symbol: "image://" + require("@/assets/icon/nwdaf2.png"),
                  symbolSize: [90, 80],
                  itemStyle: { color: "green" },
                },
                {
                  name: "UPF-2",
                  x: 130,
                  y: 0,
                  symbol: "image://" + require("@/assets/icon/nwdaf2.png"),
                  symbolSize: [90, 80],
                  itemStyle: { color: "green" },
                },
                {
                  name: "UPF-3",
                  x: 130,
                  y: 60,
                  symbol: "image://" + require("@/assets/icon/nwdaf2.png"),
                  symbolSize: [90, 80],
                  itemStyle: { color: "green" },
                },
                {
                  name: "服务端1",
                  x: 200,
                  y: 0,
                  symbol: "image://" + require("@/assets/icon/ue.png"),
                  symbolSize: [70, 70],
                },
                {
                  name: "服务端2",
                  x: 200,
                  y: 60,
                  symbol: "image://" + require("@/assets/icon/ue.png"),
                  symbolSize: [70, 70],
                },
                {
                  name: "文件传输客户端c",
                  x: 0,
                  y: 65,
                  symbol: "none",
                  label: { show: false },
                },
                {
                  name: "UPF-0c",
                  x: 60,
                  y: 5,
                  symbol: "none",
                  label: { show: false },
                },
                {
                  name: "UPF-1c",
                  x: 60,
                  y: 65,
                  symbol: "none",
                  label: { show: false },
                },
                {
                  name: "UPF-2c",
                  x: 130,
                  y: 5,
                  symbol: "none",
                  label: { show: false },
                },
                {
                  name: "UPF-3c",
                  x: 130,
                  y: 65,
                  symbol: "none",
                  label: { show: false },
                },
                {
                  name: "服务端1c",
                  x: 200,
                  y: 5,
                  symbol: "none",
                  label: { show: false },
                },
                {
                  name: "服务端2c",
                  x: 200,
                  y: 65,
                  symbol: "none",
                  label: { show: false },
                },
              ],
              links: [], // 初始化为空
              label: {
                show: true,
                position: "bottom",
                formatter: "{b}",
                color: "white",
                fontSize: 25,
              },
              lineStyle: {
                curveness: 0,
                width: 5,
                color: "white",
                opacity: 1,
              },
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.initChart();
    this.setRoute([1, 2]);
    // this.connectWebSocket();
    // console.log(this.ws);
  },
  beforeUnmount() {
    // 关闭 WebSocket 连接
    if (this.ws) {
      this.ws.close();
    }
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
  methods: {
    connectWebSocket() {
      // 创建 WebSocket 连接
      this.ws = new WebSocket("ws://10.112.51.79:38414/ws");

      // 监听消息
      this.ws.onmessage = (event) => {
        console.log("Received:", event.data);
        this.message = event.data; // 显示接收到的消息
        if (this.message.includes("U 1")) {
          this.next(1);
        } else if (this.message.includes("H 1 2")) {
          this.next(2);
        } else if (this.message.includes("D 2")) {
          this.next(0);
        }
      };

      // 监听 WebSocket 连接关闭
      this.ws.onclose = () => {
        console.log("WebSocket connection closed");
      };

      // 监听 WebSocket 错误
      this.ws.onerror = (error) => {
        console.error("WebSocket error:", error);
      };
    },
    sendMessage() {
      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
        // 发送消息
        this.ws.send("Hello from Vue!");
      }
    },
    initChart() {
      const container = document.getElementById("upf-topology");
      if (container) {
        this.myChart = echarts.init(container);
        this.myChart.setOption(this.topologyOptions[0]);
      }
    },
    updateLinks() {
      // 根据 route 数组生成新的 links
      const newLinks = [];
      const [upf1, upf2] = this.route;
      newLinks.push(
        {
          source: "目标检测客户端",
          target: "UPF-" + upf1,
          lineStyle: { color: "#c2e2ff" },
        },
        {
          source: "UPF-" + upf1,
          target: "UPF-" + upf2,
          lineStyle: { color: "#c2e2ff" },
        },
        {
          source: "UPF-" + upf2,
          target: "服务端" + (upf2 - 1),
          lineStyle: { color: "#c2e2ff" },
        },
        {
          source: "文件传输客户端c",
          target: "UPF-1c",
          lineStyle: { color: "#116dff" },
        },
        { source: "UPF-1c", target: "UPF-2c", lineStyle: { color: "#116dff" } },
        {
          source: "UPF-2c",
          target: "服务端1c",
          lineStyle: { color: "#116dff" },
        },
        {
          source: "NWDAF2",
          target: "NWDAF连接点",
          lineStyle: { color: "#e44b18" },
        },
        {
          source: "SMF",
          target: "SMF连接点",
        },
        {
          source: "   NWDAF",
          target: "负载\n感知\n模块",
        },
        {
          source: "负载\n感知\n模块",
          target: "策略\n生成\n模块",
        },
        {
          source: "策略\n生成\n模块",
          target: "SMF",
        }
      );

      // 更新图表中的 links
      this.topologyOptions[0].series[0].links = newLinks;
      this.myChart.setOption(this.topologyOptions[0]);
    },
    setRoute(newRoute) {
      // 更新 route 并调用 updateLinks
      this.route = newRoute;
      this.updateLinks();
    },
  },
};
</script>

<style scoped>
/* 设置容器的宽度和高度 */
#upf-topology {
  position: relative;
  width: 100%;
  height: 100%;
}

.return-icon {
  position: absolute;
  left: 10px;
  top: -45px;
  background-color: transparent;
  color: cyan;
  font-size: 50px;
  cursor: pointer;
  outline: none;
  z-index: 1;
}

.return-icon::after {
  content: "返回";
  /* 这是要显示的文字 */
  position: absolute;
  left: 100%;
  /* 将文字放置在图标的右侧 */
  top: 50%;
  transform: translateY(-50%);
  /* 垂直居中对齐 */
  white-space: nowrap;
  /* 防止文字换行 */
  background-color: transparent;
  /* 背景颜色 */
  color: cyan;
  /* 文字颜色 */
  padding: 2px 4px;
  /* 内边距 */
  border-radius: 4px;
  /* 圆角 */
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s;
  /* 过渡效果 */
  pointer-events: none;
  /* 防止伪元素影响点击事件 */
  font-size: 30px;
  font-weight: bold;
}

.return-icon:hover::after {
  opacity: 1;
  /* 鼠标悬停时显示 */
  pointer-events: auto;
  /* 鼠标悬停时允许点击 */
}

.switch {
  position: absolute;
  top: 10px;
  right: 80px;
}

overall-decision {
  margin-top: 80px;
  padding: 5px;
  background-color: #f5f5f5;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.overall-decision div {
  margin: 0;
  font-size: 28px;
  color: #333;
  padding: 10px 15px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
}

.overall-decision div span {
  display: inline-block;
  width: 200px;
  text-align: center;
}

.overall-decision div:last-child {
  background-color: #e8f5e9;
  color: #2e7d32;
  font-weight: bold;
}

.overall-decision div:last-child span {
  font-weight: bold;
}
</style>
